/**
 * Created by 顾杰 on 2017/5/15.
 */
import React from 'react';
import { List, Card, Icon } from 'antd-mobile';
import styles from './index.less';
import empty from 'is-empty';

const Item = List.Item;
class CardItem extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { header, body } = this.props;
    return (
      <div className="card-item">
        <List
          className="cost-list"
          renderHeader={
            () => {
              if (header === false) {
                return false;
              } else {
                let thumbIcon = null;
                if (header.svg) {
                  thumbIcon = (<Icon size="sm" type={header.svg} />);
                } else {
                  console.warn(`[header.svg] is ${Boolean(header.svg)}`);
                }
                return (
                  <div>
                    <div className="cost-list-header">
                      <Item
                        className={styles.costListHeaderItem}
                        thumb={
                          <div style={{ backgroundColor: header.color, width: '.45rem', height: '.45rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '50%' }}>
                            {thumbIcon}
                          </div>
                        }
                      >
                        <span className={styles.costListHeaderItemSpan}>&nbsp;{header.title}</span>
                      </Item>
                    </div>
                  </div>
                );
              }
            }
          }
        >
          <Card className="cost-card-header">
            <Card.Body>
              {body}
            </Card.Body>
          </Card>
        </List>
      </div>
    );
  }
}

export default CardItem;
